<template>
    <Dashboard :menu="menu">
        <el-form label-width="100px" :model="form" :rules="rules" ref="form">
            <el-form-item label="商户号" prop="mchid">
                <el-input placeholder="微信商户平台-商户号" v-model="form.mchid" style="width:400px"></el-input>
            </el-form-item>
            <el-form-item label="商户密钥" prop="key">
                <el-input placeholder="微信商户平台-API安全-密钥" v-model="form.key" style="width:400px"></el-input>
            </el-form-item>
            <el-form-item label="商户号" prop="pfx">
                <el-input v-model="form.pfx" style="display:none"></el-input>
                <el-upload action="/api/app/home/pay/wxpay/upload_cert" :headers="uploadHeaders()" :before-upload="beforeUpload" :on-success="handleSuccess" :show-file-list="false">
                    <el-button size="small" plain icon="el-icon-upload">上传文件
                        <span v-if="form.pfx">（证书已上传，重新上传可替换）</span>
                    </el-button>
                    <div slot="tip">微信商户平台，微信支付API证书apiclient_cert.p12</div>
                </el-upload>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="ok('form')">保存</el-button>
            </el-form-item>
        </el-form>
    </Dashboard>
</template>

<script>
import Dashboard from "./../../components/Dashboard.vue";
export default {
    components: {
        Dashboard
    },
    data() {
        return {
            menu: [
                {
                    name: "微信支付",
                    icon: "icon-weixinzhifu",
                    sub: [
                        {
                            name: "微信支付",
                            url: "/wxpay"
                        }
                    ]
                }
            ],
            form: {
                mchid: "",
                key: "",
                pfx: ""
            },
            rules: {
                mchid: [
                    {
                        required: true,
                        message: "请填写商户号",
                        trigger: "change"
                    }
                ],
                key: [
                    {
                        required: true,
                        message: "请填写商户密钥",
                        trigger: "change"
                    }
                ],
                pfx: [
                    {
                        required: true,
                        message: "请上传文件",
                        trigger: "change"
                    }
                ]
            }
        };
    },
    async asyncData({ app, redirect }) {
        let data = {};
        const res = await app.$axios.$get("/api/app/home/pay/wxpay/index");
        if (res && res.errmsg === "ok") {
            if (res.data) {
                data.form = res.data;
            }
        } else {
            redirect("/app/dashboard");
        }
        return data;
    },
    methods: {
        beforeUpload(file) {
            const fileType = file.type === "application/x-pkcs12";
            if (!fileType) {
                this.$message.error(
                    "格式不正确，请上传 微信支付证书 apiclient_cert.p12!"
                );
            }
            return fileType;
        },
        handleSuccess(res, file, fileList) {
            this.form.pfx = res.data;
        },
        ok(form) {
            this.$refs[form].validate(valid => {
                if (valid) {
                    this.submit();
                } else {
                    return false;
                }
            });
        },
        async submit() {
            const res = await this.$axios.$post("/api/app/home/pay/wxpay/add", {
                mchid: this.form.mchid,
                key: this.form.key,
                pfx: this.form.pfx
            });
            if (res && res.errmsg === "ok") {
                this.$message.success("保存成功");
            }
        }
    }
};
</script>
